import React, {Component} from "react";
import time, {dateFormat, getMockTime} from "@/utils/time";
import echarts from "echarts";
import {addResizeHook} from "@/utils/resize";
import {Button, Card, Col, DatePicker, Row} from "antd";
import moment from "moment";
import styles from "@/pages/GaoLu/components/AutoScore/index.less";
import {connect} from "dva";
import LoginItem from "@/pages/user/login/components/Login/LoginItem";

const {RangePicker} = DatePicker;


class LoseCountDetail extends Component {
  state = {
    visible: true,
    // timeBetween: [time.getStartOfDay(), time.getEndOfDay()],
    data: [],
    current: time.getStartOfDay(),
    chart: null,
    itemNum: 100,
    startTime: time.getStartOfDay(),
    endTime: time.getEndOfDay(),
    defaultStartTime: time.getStartOfDay(),
    defaultEndTime: time.getEndOfDay(),
    itemDict: {
      zt:"渣铁处理",
      ltlg:"炉体炉缸监控",
      zb:"指标检查",
      cz:"操作参数",
      count:"次数"
    },
    itemDetailDict:{
      CG_LT_GL_GL04_Rliaopi:"日料批",
      CG_LT_GL_GL04_RRLB:"燃料比",
      CG_LT_GL_GL04_Rcokerate:"煤比",
      CG_LT_GL_GL04_RLFLL:"风量",
      CG_LT_GL_GL04_RFYLL:"富氧流量",
      CG_LT_GL_GL04_RTQXZS:"透气性指数",
      CG_LT_GL_GL04_RSBYCZB:"上部压差占比",
      CG_LT_GL_GL04_RXBYCZB:"下部压差占比",
      CG_LT_GL_GL04_RLLRSWD:"理论燃烧温度",
      CG_LT_GL_GL04_RGFDNKG:"鼓风动能",
      CG_LT_GL_GL04_RLDWD:"炉顶温度",
      CG_LT_GL_GL04_RRFH:"热负荷",
      CG_LT_GL_GL04_RFZWD:"阀座温度",
      CG_LT_GL_GL04_RchutieCi:"日出铁次数",
      CG_LT_GL_GL04_Rtswd:"铁水温度",
      CG_LT_GL_GL04_RSi_Ti:"[Si+Ti]",
      CG_LT_GL_GL04_RMg_Al:"MgO/Al2O3",
      CG_LT_GL_GL04_R34m:"34m",
      CG_LT_GL_GL04_R26m:"26m",
      CG_LT_GL_GL04_R24m:"24m",
      CG_LT_GL_GL04_R17m:"17m",
      CG_LT_GL_GL04_Rluxin2:"炉芯温度",
      CG_LT_GL_GL04_RbengzuoguanCi:"崩、坐料管道次数",
      CG_LT_GL_GL04_RjianfengCi:"日减风次数",
      CG_LT_GL_GL04_Rquanjiaofuhe:"全焦负荷",
      CG_LT_GL_GL04_RChanliang:"铁量",
      CG_LT_GL_GL04_RMQLYL:"煤气利用率",
      CG_LT_GL_GL04_RRFWD:"风温",
      CG_LT_GL_GL04_Rtiecha:"铁量差",
      CG_LT_GL_GL04_RR2:"碱度",
      CG_LT_GL_GL04_Rshuiwencha:"水温差",
      CG_LT_GL_GL04_R21m:"21m",
    },
    option: {
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'shadow'
        }
      },
      legend: {},
      grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
      },
      xAxis: {
        type: 'value',
        boundaryGap: [0, 0.01],
      },
      yAxis: {
        type: 'category',
        data: []
      },
      series: [
        {
          type: 'bar',
          data: []
        }
      ]
    }
  };

  async componentDidMount() {

    //make it better
    //发送API 请求
    //! TODO 后端修改，异常值为0的参数，不要传了！！
    const payload =await getMockTime("GaoLuDiagnoseCount")
    let current = payload.current

    this.setState({current})


    // 基于准备好的dom，初始化echarts实例
    this.state.chart = echarts.init(document.getElementById("paramStatus"));
    // 绘制图表
    this.state.chart.setOption(this.state.option);
    addResizeHook(this, this.state.chart.resize);
    this.getStatus();
  }

  static getDerivedStateFromProps(nextProps, prevState) {
    const {itemCountDetail} = nextProps;
    const {itemDict,itemDetailDict} = prevState;

    if (itemCountDetail !== null && itemCountDetail !== undefined && prevState.chart) {
      // 获取数据副本
      prevState.option.yAxis.data = []
      prevState.option.series[0].data = []
      Object.keys(itemCountDetail).forEach(key => {
        if (!(key in itemDict)) {
          prevState.option.yAxis.data.push(itemDetailDict[key])
          prevState.option.series[0].data.push(itemCountDetail[key])
        }
      });

      prevState.chart.setOption(prevState.option, true)
    }
    //state 不需要更改
    return null
  }

  timePick = (value) => {
    this.state.current = value.toDate();
    this.getStatus()
  };


  getStatus = () => {
    const payload = {
      date: dateFormat(this.state.current),
    };
    this.props.dispatch({
      type: 'gaoluDiagnose/getItemCountDetail',
      payload
    });
  };

  showDrawer = () => {
    this.setState({
      visible: !this.state.visible,
    });
  };

  onClose = () => {
    this.setState({
      visible: 'block',
    });
  };


  render() {
    const {
      width = 100,
      height = 300
    } = this.props;

    const {startTime, endTime, data, defaultStartTime, defaultEndTime, visible} = this.state;
    const dateFormat = 'YYYY-MM-DD HH:mm:ss';

    const columns = [

      {title: '剩余指标', dataIndex: 'tag', key: 'tag'},
      {title: '指标', dataIndex: 'value', key: 'value'},
    ];


    return (

      <div>
        <Col span={24}>
          <Card bordered={false}>
            <Row>
              <DatePicker
                showTime
                format="YYYY-MM-DD"
                placeholder="选择时间"
                defaultValue={moment(this.state.current, "YYYY-MM-DD")}
                onOk={this.timePick}
              />
            </Row>
            <Row>
              <div id="paramStatus" style={{width: `${width}%`, height}}/>
            </Row>
          </Card>
        </Col>

      </div>

    )
  }
}


export default connect(({gaoluDiagnose, global}) => ({
  itemCountDetail: gaoluDiagnose.itemCountDetail,
  global
}))(LoseCountDetail);
